/*
* @Date: 2020/5/19
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import Candlestick from '@/vo/Candlestick';
import Canvas from '@/core/Canvas';
import ResizeDragableLayer from '@/layer/ResizeDragableLayer';
import MaLayer from '@/vo/Candlestick/main/MaLayer';
import Scatter from '@/vo/Scatter';
import Series from '@/vo/Scatter/Series';
import XAxisLayer from '@/vo/Scatter/XAxisLayer';
import YAxisLayer from '@/vo/Scatter/YAxisLayer';
import Circle from '@/base/Circle';
import './index.scss';
import data from './data';
const barDataes = data.map(vo => ({ ...vo, datetime: new Date(vo.time).getTime()}));
const canvas = new Canvas({
    ele: document.getElementById('root'),
    canAction: false,
});
// const resizeDragable = new ResizeDragableLayer(canvas, {
//    width: '1000px',
//    height: '500px',
//    position: 'absolute',
//    left: '100px',
//    bottom: '0',
// });
// const candle = new Candlestick(
//     canvas,
//     {
//         left: 0,
//         bottom: 0,
//         width: '100%',
//         height: '100%',
//         position: 'absolute',
//         yAxisAlign: 'right',
//         yAxisDecimal: 5,
//         xAxisFormatter: 'MM-dd hh:mm',
//         priceColor: '#FFFFFF',
//         xAxisFontSize: 24,
//         yAxisFontSize: 24,
//         crossFontColor: '#FFFFFF',
//     },
//     barDataes,
//     );
// candle.addIndicator(new MaLayer(canvas, {
//     color: '#FF4455',
//     lineWidth: 3,
// }, { data: [], params: { N: 5 }, name: 'MA'}));
// candle.addIndicator(new MaLayer(canvas, {
//     color: '#00FF00',
//     lineWidth: 3,
// }, { params: { N: 10 }, name: 'MA'}));
// candle.onSelect = (data) => {
//     console.log('on select===>', data);
// }
// console.log('candlestick===>', candle);
// resizeDragable.appendChild(candle);
//canvas.addChild(resizeDragable);
const lineDragable = new ResizeDragableLayer(canvas, {
    width: '1000px',
    height: '600px',
    position: 'absolute',
    left: '400px',
    bottom: '300px',
});
const lineXAxis = new XAxisLayer(canvas, {
    fontSize: '20px',
    color: '#777777',
    fontFamily: '仿宋',
}, ['09:00', '09:01', '09:02', '09:03', '09:04', '09:05', '09:06', '09:07', '09:08', '09:09']);
const lineYAxis = new YAxisLayer(canvas, {
    fontSize: '24px',
    color: '#777777',
    fontFamily: '仿宋',
    formatter: (value) => `${Math.round(value)}`,
});
const line = new Scatter(canvas, {
    count: 10,
    shift: 0,
    left: 0,
    bottom: 0,
    height: '100%',
    width: '100%',
    position: 'absolute',
    guttter: 8,
});
const series1 = new Series(canvas, {
    color: '#89DF30',
    type: Circle.TYPE.FILL,
    radius: (data, index) => index * 5,
}, [-1, -4, -6, -9, -8, 0, -12, 24, -35, -45]);
const series2 = new Series(canvas, {
    color: '#FF5566',
    radius: 10,
    type: Circle.TYPE.FILL,
}, [-10, -23, -9, -12, 0, 24, -18, 34, -54, -45]);
line.addSeries(series1);
line.addSeries(series2);
line.setXAxis(lineXAxis);
line.setYAxis(lineYAxis);
lineDragable.addChild(line);
console.log('line===>', line);
canvas.addChild(lineDragable);
canvas.paint();
